<template>
  <div class="container">
    <div class="closeBtn">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <div class="inputName">
      <authInput
        type="text"
        placeholder="请输入手机号码"
        rule="^\d{3,11}$"
        ree_message="请输入有效手机号"
        @input="setUserName"
      />
    </div>
    <div class="inputPwd">
      <authInput
        type="password"
        placeholder="请输入密码"
        rule="^\d{3,16}$"
        ree_message="请输入有效密码"
        @input="setPassword"
      />
    </div>
    <div class="btn">
      <authBtn text="登录" @send="setBtn" />
    </div>
    <div class="register">
      还没有账号？
      <router-link to="/register">立即注册</router-link>
    </div>
  </div>
</template>

<script>
import authInput from "../components/authInput";
import authBtn from "../components/authBtn";
export default {
  components: {
    authInput: authInput,
    authBtn
  },
  data() {
    return {
      inputName: "",
      inputPwd: ""
    };
  },
  methods: {
    setUserName(name) {
      this.inputName = name;
    },
    setPassword(password) {
      this.inputPwd = password;
    },
    setBtn() {
      // 点击登录发送ajax
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.inputName,
          password: this.inputPwd
        }
      }).then(res => {
        // 登录成功
        console.log(res);
        
        if (!res.data.statusCode) {
          this.$toast.success(res.data.message);

          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("user_id",res.data.data.user.id);

          
          this.$toast.success(res.data.message);

          // 一秒后跳转页面
          setTimeout(() => {
            this.$router.push({
              path:'/'
            })
          }, 1000);
        }
      });
    }
  }
};
</script>

<style scoped lang="less" >
.container {
  padding: 0 5.556vw;
  .closeBtn {
    padding-top: 5.556vw;
    .iconfont {
      font-size: 7.5vw;
    }
  }
}
.logo {
  display: flex;
  // 内容对齐
  justify-content: center;
  .iconfont {
    font-size: 35vw;
    color: #d81e06;
  }
}
.register {
  text-align: center;
  font-size: 3.889vw;
  margin-top: 6.667vw;
}
</style>